<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<script src="../build/react.js"></script>
	<script src="../build/react-dom.js"></script>
	<script src="../build/browser.min.js"></script>
</head>
<body>
	<div id="example"></div>

	<!-- 
		1. HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
		2. 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
	 -->
	<script type="text/babel">
		var MyComponent = React.createClass({
			handleClick: function() {
				this.refs.textInput.focus()
			},

			render: function() {
				return (
					<div>
						<input type="text" ref="textInput" />
						<input type="button" value="Click" onClick={this.handleClick} />
					</div>
				)
			}
		});

		ReactDOM.render(
			<MyComponent />,
			document.getElementById("example")
		);

		// 上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点
	</script>
</body>
</html>